Buefy — Autocomplete and Checkbox

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Autocomplete with Async Data

We can use autocomplete with async data.

For example, we can write:

<template>
  <section>
    <b-field label="Find a movie">
      <b-autocomplete
        :data="data"
        placeholder="Enter movie name"
        field="title"
        :loading="isFetching"
        @typing="getAsyncData"
        @select="option => selected = option"
      >
        <template slot-scope="props">
          <div class="media">
            <div class="media-content">{{ props.option.title }}</div>
          </div>
        </template>
      </b-autocomplete>
    </b-field>
    <p class="content">
      <b>Selected:</b>
      {{ selected }}
    </p>
  </section>
</template>

<script>
import debounce from "lodash/debounce";

export default {
  data() {
    return {
      data: [],
      selected: null,
      isFetching: false
    };
  },
  methods: {
    getAsyncData: debounce(async function(name) {
      if (!name.length) {
        this.data = [];
        return;
      }
      const res = await fetch(
        `https://api.themoviedb.org/3/search/movie?api_key=7edf1637e548d0c13892dab0a654d476&query=${name}`
      );
      const { results } = await res.json();
      this.data = results;
    }, 500)
  }
};
</script>

We listen to the typing event and call the getAsyncData method to get the data.

Async with Infinite Scroll

We can populate async data with infinite scroll.

For example, we can write:

<template>
  <section>
    <b-field label="Find a movie">
      <b-autocomplete
        :data="data"
        placeholder="movie"
        field="title"
        :loading="isFetching"
        :check-infinite-scroll="true"
        @typing="getAsyncData"
        @select="option => selected = option"
        @infinite-scroll="getAsyncData"
      >
        <template slot-scope="props">
          <div class="media">
            <div class="media-content">{{ props.option.title }}</div>
          </div>
        </template>
        <template slot="footer">
          <span v-show="page > totalPages" class="has-text-grey">No more movies found.</span>
        </template>
      </b-autocomplete>
    </b-field>
    <p class="content">
      <b>Selected:</b>
      {{ selected }}
    </p>
  </section>
</template>

<script>
import debounce from "lodash/debounce";

export default {
  data() {
    return {
      data: [],
      selected: null,
      isFetching: false,
      name: "",
      page: 1,
      totalPages: 1
    };
  },
  methods: {
    getAsyncData: debounce(async function(name) {
      if (this.page > this.totalPages) {
        return;
      }
      const res = await fetch(
        `https://api.themoviedb.org/3/search/movie?api_key=7edf1637e548d0c13892dab0a654d476&query=${name}&page=${
          this.page
        }`
      );
      const { results, total_pages } = await res.json();
      if (Array.isArray(results)) {
        this.data = [...this.data, ...results];
      }
      this.page++;
      this.totalPages = total_pages;
    }, 500)
  }
};
</script>

We added the infinite-scroll event listener to load more data when we scroll down the autocomplete list.

Checkbox

We can add a checkbox component with Buefy.

For example, we can write:

<template>
  <section>
    <div class="field">
      <b-checkbox v-model="checkbox">Basic</b-checkbox>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      checkbox: false
    };
  }
};
</script>

We add a b-checkbox component with the v-model directive to bind it to the checkbox state.

Also, we can set the indeterminate prop to set make the checkbox accept an indeterminate value:

<template>
  <section>
    <div class="field">
      <b-checkbox indeterminate>Basic</b-checkbox>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

Grouped Checkbox

We bind multiple checkbox to the same v-model value.

This way, we can have an array of selections in the checkbox.

For example, we can write:

<template>
  <section>
    <div class="block">
      <b-checkbox v-model="checkboxGroup" native-value="apple">apple</b-checkbox>
      <b-checkbox v-model="checkboxGroup" native-value="orange">orange</b-checkbox>
      <b-checkbox v-model="checkboxGroup" native-value="grape">grape</b-checkbox>
    </div>
    <p class="content">
      <b>Selection:</b>
      {{ checkboxGroup }}
    </p>
  </section>
</template>

<script>
export default {
  data() {
    return {
      checkboxGroup: ["apple"]
    };
  }
};
</script>

native-value has the value that we put in the checkboxGroup array.

When we check them off, we’ll see the checked items.

Conclusion

We can populate the autocomplete items asynchronously.

Also, we can add checkboxes with our own item